<template>
  <div class="comment">
      <h4>支持者（{{commentContent.length}}）</h4>
      <div v-for="(item,index) in commentContent" :key="index">
          <div class="user-message clear-fix">
            <div class="image">
            <img :src="item.userModel.userUrl" alt="">
            </div>
            <div class="user-name">
            <span>{{item.userModel.userName}}</span>
            <span>{{utils.parseDate(item.time)}}</span>
            </div>
            <!-- <div class="user-date" @click="changeLike($event,item.id)">
                <span>{{item.likeTotal}}</span>
                <span :class="(item.like == '0'?'linke-no':'linke-yes')"></span>
            </div> -->
        </div>
        <div class="user-content">
            <p>{{item.commentContent}}</p>
        </div>
      </div>
      <!-- 回复弹框 -->
      <div class="reply-bar" v-show="reply">
        <div class="bgi" @click="reply=false"></div>
        <div class="reply">
          <h4>评论</h4>
          <textarea title=" " placeholder="我想对他（她）说…" cols="30" rows="10" v-model="commentText"></textarea>
          <div>
            <button @click="onComment">发表</button>
          </div>
        </div>
      </div>
  </div>
</template>

<script>
export default {
    data() {
        return {
            reply: false, //评论
            // titleMinLength:2,
            // 传参
            commentData: {
                type: 13,
                id: 6,
                page: 1
            },
            commentContent: [], //获取的评论数据
            commentText: '', //评论内容
            titleMaxLength: 50,
            // titleMinLength:2,
            linke: 'linke' //是否点赞
        }
    },
    props: ['init', 'activeMark'],
    created() {
        this.commentData.id = this.activeMark
    },
    mounted() {
        this.getComment()
    },
    methods: {
        getComment() {
            // 获取评论
            this.utils.$get(
                this.utils.GET_COMMENT,
                data => {
                    this.commentContent = data.data
                },
                this.commentData
            )
        },
        // 发送评论
        onComment() {
            if(!this.utils.cookie('get','user')){
                mui.toast('请登录……')
                this.$router.push({path:'/login'})
                return
            }
            if (this.commentText.length < 2) {
                mui.toast('评论过少')
                return
            }
            let commentActive = {
                id: this.activeMark,
                type: 13,
                commentContent: this.commentText
            }
            this.utils.$post(
                this.utils.ADD_COMMENT,
                data => {
                    if (data.data == 1) {
                        this.reply = false
                        this.commentText = ''
                        this.getComment()
                    }
                },
                commentActive
            )
        },
        // 点赞
        changeLike(e, id) {
            let like = {
                id: id,
                type: 3
            }
            this.utils.$post(
                this.utils.SET_LIKE,
                data => {
                    if (data.data != 0) {
                        this.getComment()
                    }
                },
                like
            )
        }
    },
    watch: {
        init(newVal) {
            this.reply = newVal
        },
        reply(newVal) {
            this.$emit('changePop', newVal)
        },
        commentText() {
            if (this.commentText.length > this.titleMaxLength) {
                this.commentText = String(this.commentText).slice(
                    0,
                    this.titleMaxLength
                )
            }
        }
    }
}
</script>


<style lang="less">
.comment {
    padding-bottom: 0.99rem;
    > h4 {
        padding: 0.3rem 0.26rem;
        font-weight: 600;
        border-bottom: 1px solid #ddd;
    }
    .user-message {
        padding: 0.3rem 0.26rem 0;
        .image {
            float: left;
            background-color: #666;
            height: 0.8rem;
            width: 0.8rem;
            border-radius: 50%;
            overflow: hidden;
            > img {
                width: 100%;
                height: 100%;
            }
        }
        .user-name {
            float: left;
            margin-left: 0.2rem;
            > span {
                &:nth-child(1) {
                    display: block;
                    font-size: 0.24rem;
                    color: #999;
                }
                &:nth-child(2) {
                    display: inline-block;
                    margin: 0.3rem 0;
                    color: #999;
                    font-size: 0.24rem;
                }
            }
        }
        .user-date {
            float: right;
            color: #999;
            > span {
                &:nth-child(1) {
                    font-size: 0.22rem;
                }
                &:nth-child(2) {
                    float: right;
                    font-size: 0.24rem;
                    color: #999;
                    width: 0.3rem;
                    height: 0.3rem;
                    margin-left: 0.2rem;
                    margin-top: 0.05rem;
                }
            }
            .linke-no {
                background: url('../../assets/赞1@3x.png') no-repeat
                    center/cover;
            }
            .linke-yes {
                background: url('../../assets/赞@3x.png') no-repeat center/cover;
            }
        }
    }
    .user-content {
        padding: 0 0.3rem 0.3rem;
        border-bottom: 1px solid #e5e5e5;
        > p {
            font-size: 0.28rem;
            color: #333;
            line-height: 0.4rem;
        }
    }
    .reply-bar {
        width: 100%;
        height: 100%;
        z-index: 999;
        position: fixed;
        background-color: rgba(0, 0, 0, 0.4);
        top: 0;
        left: 0;
        .bgi {
            width: 100%;
            height: 100%;
        }
        .reply {
            z-index: 1000;
            display: block;
            width: 6.3rem;
            height: 3.3rem;
            border-radius: 0.04rem;
            background-color: #f6f6f6;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            padding: 0 0.25rem;
            > h4 {
                color: #232323;
                padding: 0.3rem 0;
                text-align: center;
                font-size: 0.36rem;
                font-weight: 700;
            }
            > textarea {
                display: block;
                height: 1.4rem;
                margin: 0 auto;
                border: 1px solid #e5e5e5;
            }
            > div {
                padding: 0.2rem 0;
                > button {
                    float: right;
                    height: 0.6rem;
                    background-color: #00d8c9;
                    border-radius: 0.1rem;
                    text-align: center;
                    font-size: 0.28rem;
                    width: 1.2rem;
                    color: #fff;
                }
            }
        }
    }
}
</style>
